<template>
  <el-drawer
    @close="close"
    :visible.sync="dialogVisible"
    :title="title"
    :size="500"
  >
    <el-row :gutter="10" class="box-card">
      <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="120px">
        <el-form-item
          label="菜单类型"
          prop="type"
        >
          <el-radio-group
            v-model="formData.type"
          >
            <el-radio :label="0">菜单</el-radio>
            <el-radio :label="1">功能操作</el-radio>
          </el-radio-group>
        </el-form-item>
         <el-form-item
          :label="formData.type === 0 ? '上级菜单名称' : '菜单名称'"
          prop="pname"
        >
          <el-input
            v-model="formData.pname"
            disabled
          />
        </el-form-item>
        <el-form-item
          :label="formData.type === 0 ? '菜单名称' : '功能名称'"
          prop="name"
        >
          <el-input
            v-model="formData.name"
          />
        </el-form-item>
        <el-form-item
          v-if="formData.type === 0"
          label="菜单路径"
          prop="router"
        >
          <el-input
            v-model="formData.router"
          />
        </el-form-item>
        <el-form-item
         v-if="formData.type === 0"
          label="组件名称"
          prop="remarks"
        >
          <el-input
            v-model="formData.remarks"
          />
        </el-form-item>
        <el-form-item
         v-if="formData.type === 0"
          label="组件路径"
          prop="code"
        >
          <el-input
            v-model="formData.code"
          />
        </el-form-item>
        <el-form-item
          label="API编码"
          prop="api"
        >
          <el-input
            v-model="formData.api"
          />
        </el-form-item>
        <el-form-item
          v-if="formData.type === 0"
          label="显示顺序"
          prop="sort"
        >
          <el-input-number
            v-model="formData.sort"
            controls-position="right"
            :min="1"
            :max="999"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item
          v-if="formData.type === 1"
          label="权限标识"
          prop="permission"
        >
          <el-input
            v-model="formData.permission"
          />
        </el-form-item>
        <el-form-item
          v-if="formData.type === 0"
          label="菜单图标"
        >
          <div
            class="upload-box"
          >
            <el-upload
              class="avatar-uploader"
              :action="upload.uploadPermissionImage"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :multiple="false"
              :headers="upload.uploadHeader"
              accept=".jpg,.jpeg,.png,.gif"
            >
              <img
                v-if="formData.icon"
                :src="formData.icon| getImgUrl"
                class="avatar"
              >
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
              />
              <div
                slot="tip"
                class="el-upload__tip"
                style="color: red"
              >只能上传大小不超过40k，尺寸为48*48的图片</div>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
    </el-row>
    <div class="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="handelConfirm">确定</el-button>
    </div>
  </el-drawer>
</template>
<script>
import { saveMenu } from '@/api/menus'
import { getToken } from '@/utils/auth'
export default {
  props: [],
  data () {
    return {
      dialogVisible: false,
      formData: {
        type: 0, // 菜单类型
        pname: '', // 上级菜单
        name: '', // 菜单名称
        router: '', // 菜单路径
        remarks: '', // 组件名称
        code: '', // 组件路径
        api: '', // 页面请求地址
        sort: 999,
        pid: '',
        permission: '', // 按钮权限标识
        icon: ''
      },
      rules: {
        name: [{
          required: true,
          message: '请输入菜单名称',
          trigger: 'blur'
        }],
        router: [{
          required: true,
          message: '请输入菜单路径',
          trigger: 'blur'
        }],
        remarks: [{
          required: true,
          message: '请输入组件名称',
          trigger: 'blur'
        }],
        code: [{
          required: true,
          message: '请输入组件路径',
          trigger: 'blur'
        }],
        permission: [{
          required: true,
          message: '请输入权限标识',
          trigger: 'blur'
        }],
        api: [{
          required: true,
          message: '请输入组件API编码',
          trigger: 'blur'
        }]
      },
      title: '新增菜单',
      id: null,
      isEdit: false,
      upload: {
        uploadPermissionImage: process.env.VUE_APP_BASE_API + '/permission/uploadIcon',
        uploadHeader: {
          'jwt-token': getToken()
        }
      }
    }
  },
  methods: {
    /**
     *
     * @param {*} isEdit 是否编辑
     * @param {*} data 编辑时需要的数据
     */
    async isShow (data, isEdit = false) {
      this.formData.code = ''
      this.formData.permission = ''
      this.dialogVisible = true
      this.title = isEdit ? '编辑菜单' : '新增菜单'
      this.isEdit = isEdit
      await this.$nextTick()
      if (isEdit) {
        const formData = this.formData
        for (const key in formData) {
          formData[key] = data[key]
        }
        this.formData.pname = data.pname || '一级菜单'
        this.id = data.id
      } else {
        this.formData.pid = data.pid
        this.formData.pname = data.pname || '一级菜单'
      }
    },
    handleAvatarSuccess (file) {
      if (file.code === 200) {
        this.formData.icon = file.data.publicFile.url
      } else {
        this.$notify.error(file.message)
      }
    },
    close () {
      this.formData.icon = ''
      this.$refs.elForm.resetFields()
      this.dialogVisible = false
    },
    handelConfirm () {
      this.$refs.elForm.validate(async valid => {
        if (!valid) return
        this.isEdit ? (await saveMenu({ ...this.formData, id: this.id })) : (await saveMenu(this.formData))
        this.$notify.success({
          title: `完成${this.title}`
        })
        this.$emit('update:visible')
        this.close()
      })
    }
  }
}

</script>
<style lang="scss" scoped>
.box-card {
  margin-bottom: 10px;
  padding-right: 20px;
  width: 100%;
  padding-left: 10px;
}
.footer {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40px;
  padding-left: 130px;
  padding-right: 20px;
  .el-button {
    width: 100%;
  }
}
.avatar-uploader {
  ::v-deep .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #409eff;
    }
  }
}
.avatar-uploader-icon {
  font-size: 20px;
  //color: #8c939d;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.avatar {
  width: 60px;
  height: 60px;
  display: block;
}
</style>
